<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
<head>
<%@ include file="../../include/easyui.jsp" %>
<%@ include file="../../include/pGrid.jsp" %>
<title>流程表单列表</title>
<script>

	function dbDesign(id){
		$("#dataGrid").datagrid("selectRecord",id);
		var row = $("#dataGrid").datagrid("getSelected");
		p.gridOpt({ title :  row.fName + "-数据库表设计", width : 450, height : 350,href:"/console/jForm/rewrite/dbDesign?formId="+ row.id  ,autoMax:true });
	}
	function formDesign(id){
		$("#dataGrid").datagrid("selectRecord",id);
		var row = $("#dataGrid").datagrid("getSelected");
		p.gridOpt({ title :  row.fName + "-设计", width : 450, height : 350,href:"/console/jForm/rewrite/design?formId="+ row.id  ,autoMax:true });
	}
	
	function preview(id){
		$("#dataGrid").datagrid("selectRecord",id);
		var row = $("#dataGrid").datagrid("getSelected");
		p.gridOpt({ title :  row.fName + "-表单预览", width : 450, height : 350,href:"/console/jForm/rewrite/review?formId="+ row.id  ,autoMax:true });
	}

	$(function(){
		/*列表初始化*/
		var gridParam = {
			url : "/console/jForm/list" ,
			columns : [[ 
                { field : 'fName', width : 150, title : '表单名称' }
                ,{ field : 'fTableName', width : 100, title : '数据库表' }
                ,{ field : 'fType', width : 100, title : '表单类型' }
                ,{ field : 'fSqlTemplate', width : 100, title : '建表模板' }
                ,{ field : 'fStatus', width : 60, title : '状态' }
                ,{ field : 'processKey', width : 120, title : '绑定流程' }
                ,{ field : 'fDesc', width : 150, title : '表单描述' }
                ,{field : 'createTime',width : 130,title: '创建时间'}
				,{field : 'createrName',width : 130,title: '创建人'}
				,{ field : 'opt', width : 200, title : '操作',formatter:function(value,row){
					var html = [];
					html.push('&nbsp;&nbsp;<a onclick="dbDesign(\''+ row.id +'\');" href="#">数据库设计</a>');
					html.push('&nbsp;&nbsp;<a onclick="formDesign(\''+ row.id +'\');" href="#">表单设计</a>');
					html.push('&nbsp;&nbsp;<a onclick="preview(\''+ row.id +'\');" href="#">表单预览</a>');
			    	return html.join('');
			    }} 
			]],
			singleSelect : true,
			onSelect:function(index, row){
			}
		};
		p.dataGrid = $(p.dataGrid).datagrid( $.extend({}, p.dataGridParam, gridParam));

		/*事件响应*/
		$("#toolbar .easyui-linkbutton").on("click", function() {
			var id = $(this).attr("motion_code");
			var flag = $(this).hasClass("l-btn-disabled");
			if(flag) return ;
			switch (id) {
				case "01":
					p.gridAdd({ title : "表单新增", width : 450, height : 370 });
					break;
				case "02":
					p.gridModify({title : "表单编辑" ,width : 450, height : 370 });
					break;
				case "03":
					p.gridDelete();
					break;
				case "05":
					p.gridQuery();
					break;
				default:
					break;
			}
		});
	});
</script>
</head>
<body  class="easyui-layout">
		<!-- 但行高度33px，多行时 33乘以行数  -->
		<div id="querybar" data-options="region:'north',split:false,border:false" style="height:33px;">
			<div class="easyui-panel" data-options="fit:true,border:false">
				<!-- 查询条件表单，根据配置进行替换  -->
				<form id="queryForm" >
				 <input type="hidden" name="className" value="com.fs.flow.pojo.JForm" />
				 <div style="margin-top:5px;margin-left:10px;float:left;">
				  	<input class="easyui-textbox" name="fName" style="width:240px;" data-options="label:'表单名称:',required:false" />
					<input type="hidden" name="fName_searchType" value="like" />
				 </div>
				</form>
			</div>
		</div>  
	
		<!-- 工具栏按钮 -->
		<div id="toolbar" class="easyui-panel" style="padding:3px;">
		</div>
		
		<!-- 表格 -->
		<div region="center" border="false">
			<table id="dataGrid"></table>
		</div>
</body>
</html>